<template>
  <div class="container distribution">
    <div class="distribution-box distribution-income" v-if="data">
      <div class="distribution-title">我的收入</div>
      <ul class="distribution-cell">
        <li @click="$router.push({ path: '/pages/distributionIncome/distributionIncome', query: { type: 1}})">
          <span class="distribution-num">{{data.info.income.total_price}}</span>
          <span class="distribution-describe">总收入</span>
        </li>
        <li @click="$router.push({ path: '/pages/distributionIncome/distributionIncome', query: { type: 2 }})">
          <span class="distribution-num">{{data.info.income.second_price}}</span>
          <span class="distribution-describe">二级收入</span>
        </li>
        <li @click="$router.push({ path: '/pages/distributionIncome/distributionIncome', query: { type: 3 }})">
          <span class="distribution-num">{{data.info.income.third_price}}</span>
          <span class="distribution-describe">三级收入</span>
        </li>
      </ul>
    </div>
    <div class="distribution-box distribution-team" v-if="data">
      <div class="distribution-title">我的团队</div>
      <ul class="distribution-cell">
        <li @click="$router.push({ path: '/pages/distributionTeam/distributionTeam', query: { type: 1 }})">
          <span class="distribution-num">{{data.info.team.first}}</span>
          <span class="distribution-describe">直推</span>
        </li>
        <li @click="$router.push({ path: '/pages/distributionTeam/distributionTeam', query: { type: 2 }})">
          <span class="distribution-num">{{data.info.team.second}}</span>
          <span class="distribution-describe">二级团队</span>
        </li>
        <li @click="$router.push({ path: '/pages/distributionTeam/distributionTeam', query: { type: 3 }})">
          <span class="distribution-num">{{data.info.team.third}}</span>
          <span class="distribution-describe">三级团队</span>
        </li>
      </ul>
      <div class="distribution-banner">
        <img mode="widthFix" src="../../../static/images/distribution-banner.png" alt="">
      </div>
    </div>
    <div class="distribution-box distribution-goods" v-if="data">
      <div class="distribution-title">分销商品</div>
      <div class="tabs" :class="{fixed:fixed}">
        <div class="tab" @click="changeTabs(0)" :class="{active:order==0}">综合排序</div>
        <div class="tab" @click="changeTabs(1)" :class="{active:order==1}">佣金</div>
        <div class="tab" @click="changeTabs(2)" :class="{active:order==2}">新品</div>
        <div class="tab" @click="changeTabs(3)" :class="{active:order==3}">销量</div>
      </div>
      <div class="distribution-tabs-bg" :class="{fixed:fixed}"></div>
      <div class="distribution-list">
        <div class="ant-product distribution-product" v-for="(item,index) in list" :key="index" @click="$router.push({ path: '/pages/productInfo/productInfo', query: { goods_id: item.goods_id }})">
          <div class="ant-product-pic">
            <img mode="widthFix" :src="item.goods_logo" />
          </div>
          <div class="ant-product-info">
            <div class="ant-product-header">
              <p class="ant-product-name">{{item.goods_name}}</p>
              <!-- <span class="ant-product-state state-done">已结算</span> -->
              <!-- <span class="ant-product-state state-not-done">未结算</span> -->
            </div>
            <div class="ant-product-body">
              <div>
                <p>销售价格：{{item.shop_price}}</p>
                <p>销售销量：{{item.sales_sum}}</p>
              </div>
              <div class="distribution-info">
                <p>佣金 {{item.commission}}</p>
                <!-- <p>积分 25</p> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <i-load-more v-if="!list&&isLoadEnd" :tip="'暂无数据'" :loading="loading" />
    <i-load-more v-if="!isLoadEnd" :tip="'加载更多数据'" :loading="loading" />
    <i-load-more v-if="list&&isLoadEnd" :tip="'没有更多数据了'" :loading="loading" />
    <i-toast id="toast" />
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  const {
    $Toast
  } = require("@/../static/iview/base/index");
  import request from "@/api/request";
  import {} from '@/utils/index'
  export default {
    components: {},
    data() {
      return {
        data: null,
        list: null,
        order: 0, // 0-默认综合 1-佣金排行 2-新品 3-销量
        page: 1,
        page_num: 9999,
        loading: false,
        fixed: false,
        isLoadEnd: false
      };
    },
    computed: {},
    methods: {
      changeTabs(val) {
        this.page = 1
        this.list = null
        this.order = val;
        this.getDistributGoods()
      },
      getDistributGoods() {
        const {
          order,
          page,
        } = this
        this.loading = true
        request.getDistributGoods({
          order,
          page,
        }).then(res => {
          if (res.data.list.length < 20) {
            this.isLoadEnd = true
          }
          if (this.list) {
            this.list = this.list.concat(res.data.list)
          } else {
            this.list = res.data.list
          }
          this.data = res.data
          this.loading = false
        })
      }
    },
    onPageScroll(e) {
      if (e.scrollTop >= 445) {
        this.fixed = true
      } else {
        this.fixed = false
      }
    },
    onReachBottom() {
      this.page++;
      this.getDistributGoods();
    },
    mounted() {
      this.data = null
      this.getDistributGoods()
    }
  };

</script>

<style lang="less">
  .collects {
    background: #fff;
  }

  .collects-list {
    padding-top: 10px;
  }

  .product-list {
    font-size: 0;

    .product {
      margin-bottom: 40/2px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .scroll-view-x {
    overflow-x: auto;
  }

  .distribution {}

  .distribution-box {
    background: #fff;
    margin-bottom: 10px;
    padding-bottom: 24px;

    .distribution-title {
      padding: 0 15px;
      font-size: 16px;
      color: #404040;
      padding-top: 24px;
      padding-bottom: 20px;
      line-height: 1em;
    }

  }

  .distribution-cell {
    display: flex;

    li {
      flex: 1;
      border-right: 1px solid #EEEEEE;
      display: flex;
      flex-direction: column;
      padding: 0 15px;

      &:last-child {
        border-right: 0;
      }

      .distribution-num {
        font-size: 18px;
        line-height: 1em;
        color: #EE7559;
      }

      .distribution-describe {
        margin-top: 10px;
        font-size: 12px;
        line-height: 1em;
        font-weight: 400;
        color: #A0A0A0;
      }
    }
  }

  .distribution-team {
    .distribution-cell {
      li {
        justify-content: center;
        align-items: center;
        padding: 10px 15px;

        .distribution-num {
          font-size: 24px;
          font-weight: 800;
          color: #404040;
        }
      }
    }
  }

  .distribution-banner {
    padding: 0 15px;
    margin-bottom: -24px;
    margin-top: 10px;

    img {
      width: 100%;
    }
  }

  .distribution-goods {
    .tabs {
      padding-bottom: 6px;
      position: relative;
      background: #fff;

      &.fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
      }

      &:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 200%;
        transform: scale(0.5);
        transform-origin: 0 0;
        pointer-events: none;
        box-sizing: border-box;
        border: 0 solid #F5F5F5;
        border-bottom-width: 1px;
        z-index: 0;
      }
    }

    .distribution-tabs-bg {
      &.fixed {
        height: 32px
      }
    }

    .distribution-product {
      padding: 15px;
      margin: 0;
      border-bottom: 1px solid #F8F8F8;
    }
  }

  .distribution-product {
    &.ant-product {
      .ant-product-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .ant-product-name {
          flex: 1;
        }

        .ant-product-state {
          font-size: 12px;
          line-height: 1em;
        }

        .state-done {
          color: #EE7559;
        }

        .state-not-done {
          color: #808080;
        }
      }

      .ant-product-body {
        display: flex;
        justify-content: space-between;
        flex-direction: row;

        .distribution-info {
          p {
            text-align: right;
            color: #EE7559;

          }
        }
      }
    }
  }

  .tabs-card {
    width: 284px;
    margin: 15px 0;
    border: 1px solid #EDEDED;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;

    .tab {
      flex: 1;
      height: 36px;
      line-height: 36px;
      font-size: 15px;
      text-align: center;
      color: #A0A0A0;

      &.active {
        color: #404040;
        background: #faf7f6;
      }
    }

  }

</style>
